<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/lib/css/clothes_list.css">
</head>

<body>
<div class="outest" style="margin:0 auto; width: 90%; height:820px; margin-top:40px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <div id="app">
        <el-container>
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1"><a href="/clothes_index_page">首页</a></el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">用户管理</template>
                        <el-menu-item index="2-1"><a href="/user_list_page">所有用户</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">服装管理</template>
                        <el-menu-item index="3-1"><a href="/clothes_list_page">所有服装</a></el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">仓库管理</template>
                        <el-menu-item v-for="item, index in authinstocks" :index="item.id">
                            {{item.name}}
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="5" style="float: right">
                        <template slot="title"><el-avatar :src="imgUrl"></el-avatar>&nbsp;我</template>
                        <el-menu-item index="5-1">个人中心</el-menu-item>
                        <el-menu-item index="5-2">退出</el-menu-item>
                    </el-submenu>
                    <div style="clear: both"></div>
                </el-menu>
            </el-header>

            <el-main>
                <el-page-header @back="goBack" content="">
                </el-page-header>
                <div style="width: 60%; margin-left: 22%;">
                    <input type="file" name="pclogo" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*" style="display: none"><br>
                    <img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" class="img-circle img-thumbnail img-responsive" id="avarimgs" style="width: 100px; height: 100px; margin-top: 20px; border-radius: 50px; cursor:pointer" @click="upload" title="上传头像">
                    <template>
                        <el-form :label-position="labelPosition" ref="addUser" label-width="80px" :model="formData" style="margin-top: 20px;">
                            <el-form-item label="账号" prop="account">
                                <el-input v-model="formData.account" placeholder="请填写账号" :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="身份权限" prop="auth">
                                <el-select v-model="formData.auth" placeholder="请选择身份权限" style="margin-left:-650px; width: 30%">
                                    <el-option
                                            v-for="item in auths"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="负责仓库" prop="depot.id">
                                <el-select v-model="formData.depot.id" placeholder="请选择仓库" style="margin-left:-650px; width: 30%">
                                    <el-option
                                            v-if="formData.auth=='admin'"
                                            v-for="item in depots"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                    <el-option v-if="formData.auth=='director'" label="全部" value=""></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model.number="formData.name" placeholder="请填写姓名"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click.native="updateuser()">更新</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </div>
            </el-main>

            <el-footer>
                版权所有 &nbsp;&nbsp;&nbsp;&nbsp; <el-link type="info">www.huangyt.com</el-link>
            </el-footer>

        </el-container>
    </div>
</div>

<script>
    var image = "";
    if (typeof FileReader == 'undefined') {
        document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
        document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
    }
    //选择图片，马上预览
    function xmTanUploadImg(obj) {
        var file = obj.files[0];
        image = obj.files[0];
        console.log(obj);console.log(file);
        console.log("file.size = " + file.size);
        var reader = new FileReader();
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");
            var img = document.getElementById("avarimgs");
            img.src = e.target.result;
            //或者 img.src = this.result;  //e.target == this
        }
        reader.readAsDataURL(file)
    }

    var vue = new Vue({
        el:"#app",
        data:{
            activeIndex: '3-1',
            labelPosition: 'right',
            depots:[],
            pwd1:'',
            pwd2:'',
            img: {},
            imageUrl:'',
            id:'',
            account:'',
            authinstocks:[],
            imgUrl:'',
            id:'',
            formData: {
                id:'',
                account:'',
                depot: {id:'', name:''},
                password:'',
                name:'',
                auth:''
            },
            auths:[{label:"仓库管理员", value:"admin"}, {label:"仓库主管", value:"director"}]
        },
        mounted: function () {
            this.id = this.getUrlSearch("id");
            this.getdepots();
            this.getuserData(this.id);
            this.getuser();
        },
        methods:{
            upload: function(){
                $("#xdaTanFileImg").click();
            },
            getuserData: function(id) {
                var obj = this;
                var url = "user/get/" + id;
                axios.get(url).then(function (response) {
                    var res = response.data;
                    console.log()
                    if(res.success){
                        vue.formData = res.data;
                        var time = new Date().getTime();
                        $("#avarimgs").attr("src", "images/user/" + res.data.id + ".jpg?timestamp=" + time);
                        console.log("数据返回:" + JSON.stringify(vue.formData));
                    }else {
                        obj.$notify.error({
                            title: 'FAIL',
                            message: '获取数据失败',
                        });
                    }
                });
            },
            getdepots: function(){
                var obj = this;
                var url = "depot/list";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.depots = res.data;
                        console.log("vue.depots:" + vue.depots);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                });
            },
            updateuser: function(){
                var obj = this;
                var url = "user/update";
                this.img = image;
                var data = new FormData();
                data.append("id", this.formData.id);
                data.append("password", this.formData.password);
                data.append("account", this.formData.account);
                if(""==this.formData.depot.id){
                    this.formData.depot.id = 999;
                }
                data.append("depot.id", this.formData.depot.id);
                data.append("name", this.formData.name);;
                data.append("auth", this.formData.auth);
                data.append("image", this.img);
                axios.put(url, data).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        obj.$message({
                            type: 'success',
                            message: '更新成功'
                        });
                        vue.jump("user_list_page");
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                });
            },
            //通过正则表达式获取地址栏参数
            getUrlSearch: function(name) {
                // 未传参，返回空
                if (!name) return null;
                // 查询参数：先通过search取值，如果取不到就通过hash来取
                var after = window.location.search;
                after = after.substr(1) || window.location.hash.split('?')[1];
                // 地址栏URL没有查询参数，返回空
                if (!after) return null;
                // 如果查询参数中没有"name"，返回空
                if (after.indexOf(name) === -1) return null;

                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
                // 当地址栏参数存在中文时，需要解码，不然会乱码
                var r = decodeURI(after).match(reg);
                // 如果url中"name"没有值，返回空
                if (!r) return null;

                return r[2];
            },

            logout: function () {
                var obj = this;
                var url = "login/out";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        obj.$message({
                            type: 'success',
                            message: '登出成功!'
                        });
                        vue.jump("login_page");
                    }else {
                        console.log("登出失败");
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                    }
                })
            },
            getuser: function(){
                var obj = this;
                var url = "login/getuser";
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        var id = res.data.id;
                        var time = new Date().getTime();
                        vue.id = res.data.id;
                        vue.account = res.data.account;
                        vue.imgUrl = "images/user/" + id + ".jpg?timestamp=" + time;
                        console.log("this.imgUrl:" + vue.imgUrl);
                        vue.getauthinstock(vue.account);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },
            getauthinstock: function(account){
                console.log("account:" + account);
                var obj = this;
                var url = "login/getauthorInstock/" + account;
                console.log("url:" + url)
                axios.get(url).then(function (response) {
                    var res = response.data;
                    if(res.success){
                        vue.authinstocks = res.data;
                        console.log("vue.authinstocks:" + vue.authinstocks);
                    }else {
                        obj.$message.error({
                            type: 'fail',
                            message: res.msg
                        });
                        vue.jump("login_page");
                    }
                })
            },

            jump: function(url){
                setInterval(function () {
                    window.location.href = url;
                }, 1000);
            },

            handleSelect: function(key, keyPath) {
                console.log(key, keyPath);
                if(keyPath[0]==4){
                    window.location.href = "instock_list_page?depotid=" + key;
                }
                if(key=="5-1"){
                    var url = "user_center_page?id=" + this.id;
                    window.location.href = url;
                }
                if(key=="5-2"){
                    this.logout();
                }
            },
            goBack() {
                history.back();
            }

        }
    })
</script>
</body>
</html>